<template>
  <div class="app-container editcss">
    <el-row :gutter="0" class="el-card is-always-shadow el-card__body  card_contents" style="padding: 0px;">
      <el-col class="titleHeight">
        <el-row class="content_h">
          <el-col class="title_tops">
            <div class="title_tops_t">
              <div class="title_top_E">Instruction Management</div>
              <div class="title_top_C">说明书管理</div>
            </div>
          </el-col>
          <el-col class="screen_case">
            <div class="screen_case_amount screen_caseMD">
              <span class="screen_case_amount_lable">说明书数量：</span>
              <span class="screen_case_amount_value">{{ tableData.length }}</span>
            </div>
            <construction title="新建说明书" @addition="additions" class="screen_caseMD" />
          </el-col>
        </el-row>
      </el-col>
      <el-col class="dialog_title_ch_conter_operate  card_contents_tex">
        <el-table :data="tableData" :key="randomTableKey" :height="endHeight"  fit style="width: 100%" header-row-class-name="hrcn" row-class-name="rcn">
          <el-table-column type="index" align="center" label="序号" width="130">
          </el-table-column>
          <el-table-column align="" label="说明书标题">
            <template slot-scope="scope">
              {{ scope.row.questionTitle }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建时间" width="337">
            <template slot-scope="scope">
              {{ parseTime(scope.row.createTime,'{y}-{m}-{d} {h}:{i}:{s}') }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="220">
            <template slot-scope="scope">
              <el-button class="editbtn" type="text" size="small" @click="editClick(scope.row)">
                <img src="../../assets/iconfont/edit.png" alt="">
                编辑</el-button>
              <el-button class="editbtn" type="text" size="small" @click="viewClick(scope.row)">
                <img src="../../assets/iconfont/particulars.png" alt="">
                查看</el-button>
              <el-button class="delbtn" type="text" size="small" @click="delClick(scope.row)">
                <img src="../../assets/iconfont/icondel.png" alt="">
                删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 新增 编辑 -->
    <el-dialog :visible.sync="addDialogVisible" custom-class="addeteDialog" :modal='true'>
      <div slot="title">
        <span class="title_top_E">{{ addFrom.questionId ? 'Edit' : 'New' }} Specification</span>
        <span class="title_top_C">{{ addFrom.questionId ? '编辑' : '新建' }}说明书</span>
      </div>
      <div class="addeteDialog_conter">
        <div class="top_content" v-if="addDialogVisible">
          <screenSelect title="说明书标题：" type='input' class="mr0" v-model="addFrom.questionTitle" :isValue='addFrom.questionTitle'
            placeholder="请输入说明书标题" @transfer="valueHeld($event, 'questionTitle')" width='100%' position="top" />
          <div class="mb10 mt10 acon">说明书内容：</div>
          <Toolbar ref="editorL" style="border-bottom: 1px solid #ccc" :editor="editor" :default-config="toolbarConfig"
            :mode="mode" />
          <Editor v-model="addFrom.questionContent" style="height: 300px; overflow-y: hidden;"
            :default-config="editorConfig" :mode="mode" @onCreated="onCreated" @onBlur="onBlur" />
        </div>
        <div class="footer_submit">
          <el-button type="primary" class="ch_button_seav" @click="addsubmit">
            <img class="ch_button_img_seav" src="../../assets/iconfont/icon-seavicon.png" alt="" srcset="">
            <div>提交</div>
          </el-button>
        </div>
      </div>

    </el-dialog>
    <!-- 查看 -->
    <el-dialog :visible.sync="viewDialogVisible" custom-class="addeteDialog" :modal='true'>
      <div slot="title">
        <span class="title_top_E">Detail FAQ</span>
        <span class="title_top_C">说明书详情</span>
      </div>
      <div class="addeteDialog_conter">
        <div class="top_content">
          <div class="lableCls">标题：</div>
          <div class="valueCls">{{ addFrom.questionTitle }}</div>
          <div class="lableCls mt20">内容：</div>
          <div class="valueCls" v-html="addFrom.questionContent"></div>
        </div>
      </div>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog title="提示" :visible.sync="delDialogVisible" custom-class="deleteDialog" :show-close='false' :modal='true'>
      <span class="deleteDialogSpanconter">您确认要删除该条信息？</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="delHeld">确认删除</el-button>
        <el-button type="primary" @click="delDialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import construction from '@/components/construction/index.vue'
import screenSelect from '@/components/screenSelect/index.vue'
import { getContentList, getContentAdd, getContentUpdate, getContentDetail, getContentDelete } from '@/api/contentcenter'
import {upImg} from '@/api/user'
import {
  mapGetters
} from 'vuex'
import {
    Editor,
    Toolbar
  } from '@wangeditor/editor-for-vue'
  import '@wangeditor/editor/dist/css/style.css'
export default {
  name: "specification",
  components: {
    construction,
    screenSelect,
    Editor,
    Toolbar
  },
  computed: {
    ...mapGetters([
      'permissionList'
    ])
  },
  data() {
    return {
      delDialogVisible: false,
      addDialogVisible: false,
      viewDialogVisible: false,
      addFrom: {type:1},
      imageUrl: '',
      tableData: [],
      editor: null,
      toolbarConfig: {
        excludeKeys: ['group-video', 'insertImage']
      },
      editorConfig: {
        placeholder: '请输入内容...',

        MENU_CONF: {
          //配置上传图片
          uploadImage: {
            customUpload: this.uploadImg
          }
        }

      },
      mode: 'default',
            endHeight:0,
            randomTableKey:null
    };
  },
  mounted() {
    console.log(this.$route);
    this.getList()
    let fHeight = (window.getComputedStyle(document.querySelector('.editcss')).height).replace('px', "")
    let zHeight = (window.getComputedStyle(document.querySelector('.titleHeight')).height).replace('px', "")
    this.endHeight = (fHeight-zHeight-120)
  },
    beforeDestroy() {
        const editor = this.editor;
        if (editor == null) return;
        editor.destroy();
      },
  methods: {
    getList() {
      let that = this
      const loading = that.$loading({
        lock: true,
        text: 'Loading...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      getContentList(1).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.contentList
          this.randomTableKey = Math.random()
          loading.close()
        }
      })
    },
    valueHeld(childParam, fatherparam) {
      this.addFrom[fatherparam] = childParam
    },
    delClick(row) {
      this.addFrom = row
      this.delDialogVisible = true
    },
    // 确认删除
    delHeld() {
      getContentDelete(this.addFrom.questionId).then(res => {
        if (res.code == 200) {
          this.delDialogVisible = false
          this.$Toast('删除成功')
          this.getList()
        }
      })
    },
    onCreated(editor) {
      this.editor = Object.seal(editor)
    },
    onBlur(editor) {
      this.addFrom.questionContent = editor.getHtml()
    },
    // 上传图片
    uploadImg(file, insertFn) {
      let imgData = new FormData();
      imgData.append('file', file);
      console.log(file);
      // 调用上传图片接口，上传图片  我这里testUpImg是测试接口
      upImg(imgData).then(response => {
        console.log(response);
        if (response.code == 200) {
          //插入后端返回的url
          insertFn(response.data.imgUrl);
        } else {}
      })
    },
    viewClick(row) {
      this.addFrom = row
      this.viewDialogVisible = true
    },
    editClick(row) {
      this.addDialogVisible = true
      this.addFrom = row
    },
    additions(e) {
      console.log(e);
      this.addFrom = { type: 1 }
      this.addDialogVisible = e
    },
    // 提交
    addsubmit() {
      if(!this.addFrom.questionTitle){
        this.$Toast('请输入标题')
        return
      }
      if(this.addFrom.questionContent=='<p><br></p>'){
        this.$Toast('请填写内容')
        return
      }
      if (this.addFrom.questionId) {
        getContentUpdate(this.addFrom).then(res => {
          if (res.code == 200) {
            this.$Toast('修改成功')
            this.getList()
          }
        })

      } else {
        getContentAdd(this.addFrom).then(res => {
          if (res.code == 200) {
            this.$Toast('添加成功')
            this.getList()
          }
        })
      }
      this.addDialogVisible = false
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .hrcn th {
  background-color: #FFFFFF;
  color: #989898;
  font-size: 15px;
  font-weight: 400;
}

::v-deep .hrcn th .cell {
  border-right: 1px solid #EFEFEF;
}

::v-deep .hrcn th:last-child .cell {
  border-right: none;
}

::v-deep .rcn {
  color: #000;
  font-size: 16px;
  font-weight: 400;
}

::v-deep .rcn td:nth-last-child(1) {
  border-left: 1px solid #EFEFEF;
}

.card_contents {
  height: calc(100% - 1px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .card_contents_tex {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 20px;
  }

  .card_contents_footer {
    padding: 16px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #EFEFEF;
  }
}

.content_h {
  min-height: 149px;
  border-radius: 5px;
  padding: 0px;
  border-bottom: 1px solid #EFEFEF;
}

.title_tops {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;
  min-height: 79px;
  border-bottom: 1px solid #EFEFEF;

  .title_tops_t {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.screen_case_title {
  font-size: 16px;
  font-weight: 400;
  color: #000;
  margin-right: 35px;
}

.title_top_E {
  font-size: 12px;
  font-weight: 400;
  color: #9898989E;
}

.title_top_C {
  font-size: 18px;
  font-weight: 400;
  color: #000;
}

.screen_case {
  display: flex;
  align-items: center;
  padding: 15px 30px;
}

.screen_case_amount {
  .screen_case_amount_lable {
    font-size: 15px;
    color: #989898;
  }

  .screen_case_amount_value {
    font-size: 16px;
    color: #000;
  }
}

::v-deep .ch_button_seav {
  padding: 7px 27px;

  span {
    display: flex;
    align-items: center;
    justify-content: center;

    div {
      font-size: 16px;
      font-weight: 400;
      margin-left: 10px;
    }
  }
}

.ch_button_img_seav {
  width: 24px;
  height: 24px;
}

.dialog_title_ch_conter_operate {
  // padding: 24px 35px;
  // border: 1px solid #EBEBEB;
  border-radius: 2px;
  // display: flex;
  // align-items: center;
}

::v-deep .editbtn span,
::v-deep .delbtn span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.editbtn,
.delbtn {
  img {
    width: 15px;
    height: 15px;
  }
}

.delbtn {
  color: #FE294D;
}

.editbtn:active,
.delbtn:active {
  opacity: .6;
}

.el-dialog__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

//新增弹窗
::v-deep .addeteDialog {
  background-color: #FFFFFF;
  width: 1268px;
  // height: 764px;
  border-radius: 6px;
  box-shadow: 0 0 10px #60778E47;
  display: flex;
  flex-direction: column;
}

::v-deep .addeteDialog .el-dialog__header {
  height: 80px;

  div {
    display: flex;
    flex-direction: column;
  }

  border-bottom: 1px solid #EFEFEF;

  // 自定义弹窗x号
  .el-dialog__close::before {
    content: ' ';
    background: url(../../assets/iconfont/x-circle.png);
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    display: flex;
  }

  .el-dialog__close:active::before {
    background: url(../../assets/iconfont/x-circleactive.png);
    background-size: 20px 20px;
  }
}

::v-deep .addeteDialog .el-dialog__body {
  padding: 17px 20px;

  .addeteDialog_conter {
    border: 1px solid #EFEFEF;
    flex: auto;
    display: flex;
    flex-direction: column;

    .top_content {
      flex: 1;
      min-height: 200px;
      max-height: 580px;
      overflow-y: auto;
      padding: 20px 23px;

      .content_checkbox {
        .title_che {
          margin-top: 20px;
          margin-bottom: 10px;
          font-size: 15px;
          font-weight: 400;
          color: #989898;
        }

        .title_che_sup {
          font-size: 13px;
          font-weight: 400;
          color: #414141;
        }

        .el-checkbox {
          margin-top: 8px;
        }

      }
    }

    .footer_submit {
      display: flex;
      align-items: center;
      justify-content: center;
      border-top: 1px solid #EFEFEF;
      padding: 10px 0 15px 0;
    }
  }
}

//删除弹窗
::v-deep .deleteDialog {
  background-color: #FFFFFF;
  width: 552px;
  height: 332px;
  border-radius: 6px;
  box-shadow: 0 0 10px #60778E47;
  display: flex;
  flex-direction: column;
}

::v-deep .deleteDialog .el-dialog__header {
  .el-dialog__title {
    color: #000;
    font-size: 18px;
    font-weight: 400;
  }

  border-bottom: 1px solid #EFEFEF;
  // 自定义弹窗x号
  // .el-dialog__close::before{
  //   content:' ';
  //   background: url(../../assets/iconfont/x-circle.png);
  //   background-size: 20px 20px;
  //   width: 20px;
  //   height: 20px;
  //   display: flex;
  // }
  // .el-dialog__close:active::before{
  //   background: url(../../assets/iconfont/x-circleactive.png);
  //   background-size: 20px 20px;
  // }
}

::v-deep .deleteDialogSpanconter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 18px;
  font-weight: 400;
  color: #000;
}

::v-deep .deleteDialog .el-dialog__body {
  flex: 1;
}

.deleteDialog .dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;

  button {
    width: 120px;
    height: 38px;
    border-radius: 1px;
    font-size: 16px;
    font-weight: 400;
    color: #FFFFFF;
  }

  button:active {
    opacity: .6;
  }

  button:nth-child(1) {
    margin-right: 32px;
    background-color: #FE294D;
    border-color: #FE294D;
  }

  button:nth-child(2) {
    background-color: #0584FE;
    border-color: #0584FE;
  }
}

.authority {
  margin-bottom: 25px;
}
.lableCls {
  font-size: 16px;
  font-weight: 400;
  color: #989898;
}
.valueCls{
  font-size: 14px;
  font-weight: 400;
  color: #000;
  text-indent: 2em;
}
.acon{
  background: none;
  padding: 0 0 6px 0;
  font-size: 15px;
  font-weight: 400;
  color: #989898;
}
::v-deep .el-table__body tr.hover-row.current-row>td,::v-deep .el-table__body tr.hover-row.el-table__row--striped.current-row>td,::v-deep .el-table__body tr.hover-row.el-table__row--striped>td,::v-deep .el-table__body tr.hover-row>td{
     background-color:#dbdbdb;
 }
</style>
